<%--
  Created by IntelliJ IDEA.
  User: Xq
  Date: 2021/3/30 0030
  Time: 21:43
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<% String path = request.getContextPath()+"/"; %>
<!DOCTYPE html>
<html class="x-admin-sm">
<head>
    <base href="<%=path%>">
    <meta charset="UTF-8">
    <title>部门管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" href="layui/css/font.css">
    <link rel="stylesheet" href="layui/css/xadmin.css">
    <script src="layui/lib/layui/layui.js" charset="utf-8"></script>

    <link rel="stylesheet" href="js/tree/css/demo.css" type="text/css">
    <link rel="stylesheet" href="js/tree/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <script type="text/javascript" src="js/tree/js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="js/tree/js/jquery.ztree.core.js"></script>
    <script type="text/javascript" src="js/tree/js/jquery.ztree.exedit.js"></script>
</head>
<body>

<div class="layui-container" style="margin-top: 40px">
    <div class="layui-row">
        <div class="layui-col-md4">
            <ul id="treeDemo" class="ztree"></ul>
        </div>
        <div class="layui-col-md8">
            <form class="layui-form" style="width:80%;" id="form">

                <input type="hidden" name="id" id="id" value="">

                <div class="layui-form-item">
                    <label class="layui-form-label">部门编号</label>
                    <div class="layui-input-block">
                        <input type="text" id="deptCode" name="deptCode" value="" class="layui-input" lay-verify="required" placeholder="请输入部门编号">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">部门名称</label>
                    <div class="layui-input-block">
                        <input type="text" id="deptName" name="deptName" value="" class="layui-input" lay-verify="required" placeholder="请输入部门名称">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">父级部门</label>
                    <div class="layui-input-block" id="parent">
                        <input type="hidden" name="parentId" id="parentId" >
                        <input type="text" id="parentName" name="parentName" value="" class="layui-input" autocomplete="off" placeholder="请选择父级部门">
                        <div id="parentTree" style="z-index: 1000;display:none;position: absolute;">
                            <ul id="treeParent" class="ztree" style="margin-top: 0px;"></ul>
                        </div>
                    </div>
                </div>


            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn msubmit" type="button" lay-submit="" lay-filter="addUser">立即提交</button>
                    <button type="button" class="layui-btn layui-btn-primary" id="reset_btn">重置</button>
                </div>
            </div>
            </form>
        </div>
    </div>
</div>
</body>
<script>
    layui.use(['form','layer'],function (){
        let form = layui.form;
        let layer = layui.layer;

        // 自定义重置按钮功能
        $("#reset_btn").click(function (){
            $("#id").val("");
            $("#form")[0].reset();
        });

        // 这里是获取焦点时的事件
        $("#parentName").focus(function(){
            $("#parentTree").show();
        });

        // 这里是失去焦点时的事件
        $("#parentName").blur(function (){
            $("#parentTree").hide();
        });

        // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
        var setting = {
            data: {
                simpleData: {
                    enable: true,
                    idKey: "id",
                    pIdKey: "pid",
                    rootPId: 0
                }
            },
            edit: {
                enable: true,
                showRenameBtn: false
            },
            callback: {
                beforeRemove: zTreeBeforeRemove,
                onClick: zTreeOnClick
            }
        };
        // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
        var parentsetting = {
            data: {
                simpleData: {
                    enable: true,
                    idKey: "id",
                    pIdKey: "pid",
                    rootPId: 0
                }
            },
            callback: {
                onMouseDown: parentTreeOnClick
            }
        };
        // zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）
        $(document).ready(function(){
            creatZtree();
        });

        // 数据库资源信息生成的json对象数组
        let jsonObject;
        // 生成ztree树
        function creatZtree(){
            $.getJSON("system/dept",function (data){
                let treeObj = $.fn.zTree.init($("#treeDemo"), setting, data);
                let parentTree = $.fn.zTree.init($("#treeParent"), parentsetting, data);
                parentTree.expandAll(true);
                treeObj.expandAll(true);
                jsonObject = data;
            })
        }

        // 点击下拉菜单中的节点，更改输入框的内容
        function parentTreeOnClick(event, treeId, treeNode){
            if(treeNode!=null){
                $("#parentName").val(treeNode.name);
                $("#parentId").val(treeNode.id);
                $("#parentTree").hide();
                form.render();
            }
        }

        // 节点被点击回调函数
        function zTreeOnClick(event, treeId, treeNode) {
            let id = treeNode.id;
            $.ajax({
                url:"system/dept/"+id,
                type: 'get',
                dataType: 'json',
                success: function (ret){
                    $("#id").val(ret.id);
                    $("#deptCode").val(ret.deptCode);
                    $("#deptName").val(ret.name);
                    $("#parentId").val(ret.pid);
                    if(ret.pid==0){
                        $("#parentName").val("无父无母");
                    }else{
                        // 循环ztree对象，当前点击节点的pid==循环中节点的id，即循环中节点对象为当前点击节点的父级
                        jsonObject.forEach(function (data){
                            if(treeNode.pid==data.id){
                                $("#parentName").val(data.name);
                            }
                        })
                    }
                    form.render();
                }
            });
        };

        // 通过节点对象，删除节点前调用该方法,返回值为false时表示不同意删除节点
        function zTreeBeforeRemove(treeId, treeNode){
            let id = treeNode.id;
            $.ajax({
                url:"system/dept/"+id,
                type: 'delete',
                dataType: 'json',
                success:function (ret){
                    if(ret.status){
                        layer.msg("删除节点成功",function (){
                            return true;
                        });
                    }else{
                        layer.msg("删除节点失败",function (){
                            return false;
                        });
                    }
                }
            });
        }

        // 添加资源
        $(".msubmit").click(function(){
            let param = $("#form").serialize();
            $.ajax({
                url:'system/dept',
                data:param,
                type:'post',
                dataType:'json',
                success:function (ret){
                    if(ret.status){
                        layer.msg("操作成功",function (){
                            // $("#form").submit();
                            $("#id").val("");
                            creatZtree();
                            $("#form")[0].reset();
                        });
                    }else{
                        layer.msg("操作失败，刷新页面重试");
                    }
                }
            });
        });
    });
</script>
</html>
